import { FC, memo, useCallback, useState } from 'react';
import Base from '@/components/auto-refresh-switch/Base';
import styles from './toolbar.module.less';
import MonitorVersionDropDown from '@/components/order-dropdown/MonitorVersionDropDown';
import { OrderOptions } from '@/types/OrderOptions';
import SearchIcon from '@/components/search-drawer/SearchIcon';
import OrderDropDownBase from '@/components/order-dropdown/Base';

interface IToolBar {
  versionOptions: OrderOptions[];
  isLookOnline: boolean;
  setIsLookOnline: (flag: boolean) => void;
}
const ToolBar: FC<IToolBar> = (props) => {
  const { versionOptions, isLookOnline, setIsLookOnline } = props;

  const handleVersionOrder = useCallback(
    (order: string, orderKey: string, orderType: string) => {},
    [],
  );

  const handleOrder = (
    order: string,
    orderKey: string,
    orderType: string,
  ) => {};

  const handleSearch = (value: string) => {};
  return (
    <div className={`flex ai-center jc-between ${styles.toolBar}`}>
      <Base
        text="只看在线："
        checked={isLookOnline}
        onChange={setIsLookOnline}
      />
      <MonitorVersionDropDown
        versionOptions={versionOptions}
        handleOrder={handleVersionOrder}
      />

      <OrderDropDownBase
        orderOptions={[{ text: '添加时间', value: 'addTime' }]}
        handleOrder={handleOrder}
        defaultOrderKey="addTime"
      />

      <SearchIcon
        placeholder="请输入矿场名或分组名关键字"
        handleSearch={handleSearch}
      />
    </div>
  );
};

export default memo(ToolBar);
